<template>
    <a-modal class='addUserToGroupModal' v-model:visible="visible" :width="1100" title="组下用户" :footer="null"
        @cancel="cancelAction">
        <div class="search-bar">
            <a-form :label-col="{ style: { width: '70px' } }" :wrapper-col="{ style: { width: '120px' } }" layout="inline">
                <a-form-item label="用户名">
                    <a-input v-model:value="searchForm.username" allow-clear></a-input>
                </a-form-item>
                <a-form-item label="手机号">
                    <a-input v-model:value="searchForm.mobile" allow-clear></a-input>
                </a-form-item>
                <a-form-item label="机构名称">
                    <a-input v-model:value="searchForm.orgName" allow-clear></a-input>
                </a-form-item>
                <a-form-item label="用户类型">
                    <a-select v-model:value="searchForm.userType" allow-clear>
                        <a-select-option :value="1">SF同步用户</a-select-option>
                        <a-select-option :value="0">系统注册用户</a-select-option>
                    </a-select>
                </a-form-item>
            </a-form>
            <div style="float: right">
                <a-button type="primary" @click="searchAction" :loading="__data.loading" style="margin-right: 10px">查询
                </a-button>
                <a-button @click="resetAction" :loading="__data.loading" style="margin-right: 10px">重置</a-button>
                <a-button @click="delAction" :loading="__data.loading" :disabled="__data.selectedRowKeys.length == 0">删除
                </a-button>
            </div>
        </div>
        <a-table :row-selection="{ selectedRowKeys: __data.selectedRowKeys, onChange: onSelectChange }"
            :row-key="(record) => record.userId" :columns="__data.columns" :data-source="__data.tableData"
            :scroll="{ y: 500 }" :pagination="false" :loading="__data.loading" />
        <a-pagination :current="__data.pg.current" :pageSize="__data.pg.pageSize" :total="__data.pg.total"
            :show-total="(total) => `共${total}条`" @change="onPageChange" @showSizeChange="onSizeChange"
            class='cus-pg' />
    </a-modal>
</template>

<script lang='ts' setup>
import { reactive, watch, toRefs, Ref } from 'vue';
import { getUsersByGroupIdReq, delUsersByGroupIdReq } from '/@/api/group';
import { useMessage } from '/@/hooks/web/useMessage';
import {
    Pagination as APagination, Modal as AModal, Table as ATable, Form as AForm,
    FormItem as AFormItem, Select as ASelect, SelectOption as ASelectOption
} from 'ant-design-vue';

interface IEditInfo {
    groupId: number;
    userGroupModelList: Array<any>;
    [p: string]: any;
}
const { createMessage } = useMessage();
const props = defineProps({
    defaultData: {
        type: Object || undefined,
        default: () => undefined
    },
    visible: {
        type: Boolean,
        default: () => false
    }
})
const emits = defineEmits(['update:visible'])

let __data = reactive({
    loading: false,
    selectedRowKeys: [],
    columns: [
        { 'title': '用户名', dataIndex: 'username', width: 90 },
        { 'title': '编号', dataIndex: 'userNo', width: 150 },
        { 'title': '邮箱', dataIndex: 'email', width: 150 },
        { 'title': '手机', dataIndex: 'mobile', width: 120 },
        { 'title': '机构', dataIndex: 'orgName', width: 150, customRender: ({ record }) => record?.orgModel?.orgName },
        { 'title': '用户类型', dataIndex: 'autoFlag', width: 150, customRender: ({ record }) => record?.autoFlag == 1 ? '同步sf用户' : '系统注册用户' },
    ],
    pg: {
        current: 1,
        pageSize: 10,
        total: 0
    },
    tableData: []
});
let { visible: visible, defaultData } = toRefs(props) as {
    visible: Ref<boolean>,
    defaultData: Ref<IEditInfo>,
};
const getUserListAction = async function () {
    resetTableData();
    let p = {
        startIndex: __data.pg.current,
        pageSize: __data.pg.pageSize,
        username: searchForm.username,
        mobile: searchForm.mobile,
        orgName: searchForm.orgName,
        autoFlag: searchForm.userType,
        groupId: defaultData.value.groupId
    };
    __data.loading = true;
    let { data, respCode, respMsg } = await getUsersByGroupIdReq(p);
    __data.loading = false;
    if (respCode === 200) {
        __data.tableData = data.list;
        __data.pg.total = data.total;
    } else {
        createMessage({
        message: respMsg,
        type: 'error'
      });
    }
}
watch(visible, (nv: boolean) => {
    if (nv) {
        getUserListAction();
    }
})

const onSelectChange = (selectedRowKeys: []) => {
    __data.selectedRowKeys = selectedRowKeys;
};

const resetTableData = () => {
    __data.tableData = [];
    __data.pg.total = 0;
}
const resetTableSelect = () => {
    __data.selectedRowKeys = [];
}

const resetPg = () => {
    __data.pg.current = 1;
    __data.pg.pageSize = 10;
    __data.pg.total = 0;
}
const onPageChange = (n) => {
    __data.pg.current = n;
    getUserListAction();
};
const onSizeChange = (n: any) => {
    __data.pg.pageSize = n;
    __data.pg.current = 1;
    getUserListAction();
};

// search bar
// 获取数据权限对应的应用
const searchForm = reactive({
    username: '',
    mobile: '',
    orgName: '',
    userType: '',
});
const { resetFields } = AForm.useForm(searchForm, reactive({}))
const searchAction = () => {
    resetPg();
    getUserListAction();
}
const resetAction = () => {
    resetPg();
    resetFields();
    searchAction();
    resetTableSelect();
}
const delAction = async () => {
    //TODO 调用删除用户接口
    const { respCode, respMsg } = await delUsersByGroupIdReq({
        userIds: __data.selectedRowKeys,
        groupId: defaultData.value.groupId
    })
    if (respCode == 200) {
        createMessage({
        message: respMsg,
      })
        resetPg();
        resetTableSelect();
        searchAction();
    }
}

const cancelAction = _ => {
    emits('update:visible', false)
}

</script>

<style lang="less">
.addUserToGroupModal {
    .search-bar {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
    }
}
</style>